import React, { useState, useEffect } from 'react';
import { Layout, Breadcrumb, Card, Table, Button, Space, Input, message } from 'antd';
import { Content } from 'antd/es/layout/layout';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, DownloadOutlined } from '@ant-design/icons';
import * as XLSX from 'xlsx';

const Inventory = () => {
  const [inventoryData, setInventoryData] = useState([
    { id: 1, name: '阿莫西林胶囊', category: '抗生素类', quantity: 100, unit: '盒', status: '充足' },
    { id: 2, name: '布洛芬片', category: '解热镇痛类', quantity: 80, unit: '瓶', status: '充足' },
    { id: 3, name: '奥美拉唑', category: '消化系统类', quantity: 60, unit: '盒', status: '预警' },
    { id: 4, name: '维生素C片', category: '维生素类', quantity: 200, unit: '瓶', status: '充足' },
  ]);
  
  // 添加搜索相关的状态
  const [searchText, setSearchText] = useState('');
  const [filteredData, setFilteredData] = useState(inventoryData);

  // 搜索功能实现
  useEffect(() => {
    if (!searchText) {
      setFilteredData(inventoryData);
      return;
    }
    
    const filtered = inventoryData.filter(item => 
      item.name.includes(searchText) || 
      item.category.includes(searchText) ||
      item.status.includes(searchText)
    );
    
    setFilteredData(filtered);
  }, [searchText, inventoryData]);

  const columns = [
    {
      title: '药品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
    },
    {
      title: '库存数量',
      dataIndex: 'quantity',
      key: 'quantity',
    },
    {
      title: '单位',
      dataIndex: 'unit',
      key: 'unit',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <span style={{ color: status === '充足' ? 'green' : 'orange' }}>{status}</span>
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button type="link" icon={<EditOutlined />}>编辑</Button>
          <Button type="link" danger icon={<DeleteOutlined />}>删除</Button>
        </Space>
      ),
    },
  ];

  // 导出为Excel功能
  const exportToExcel = () => {
    const worksheet = XLSX.utils.json_to_sheet(filteredData.map(item => ({
      药品名称: item.name,
      分类: item.category,
      库存数量: item.quantity,
      单位: item.unit,
      状态: item.status
    })));
    
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, '库存数据');
    
    // 导出文件
    XLSX.writeFile(workbook, '库存数据.xlsx');
    message.success('导出成功！');
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout className="site-layout">
        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>库存</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            <Card 
              title="库存管理" 
              bordered={false}
              extra={
                <Space>
                  {/* 添加搜索框 */}
                  <Input
                    placeholder="搜索药品名称、分类或状态"
                    prefix={<SearchOutlined />}
                    value={searchText}
                    onChange={(e) => setSearchText(e.target.value)}
                    style={{ width: 250 }}
                  />
                  {/* 添加导出按钮 */}
                  <Button 
                    icon={<DownloadOutlined />} 
                    onClick={exportToExcel}
                  >
                    导出为Excel
                  </Button>
                  <Button 
                    type="primary" 
                    icon={<PlusOutlined />} 
                  >
                    添加库存
                  </Button>
                </Space>
              }
            >
              <Table dataSource={filteredData} columns={columns} pagination={{ pageSize: 5 }} />
            </Card>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Inventory;